<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dashed Line</title>
    <script type="text/javascript" src="esl.js"></script>
</head>
<body>
    <div id="Main" style="width:1200px;height:600px;"></div>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            "zrender",
            'zrender/graphic/shape/Star',
            "zrender/graphic/shape/Polyline",
            "zrender/graphic/shape/Line",
            "zrender/graphic/shape/BezierCurve"
        ],
        function(zrender, StarShape, PolylineShape, LineShape, BezierCurve){

            // 初始化zrender
            var zr = zrender.init(document.getElementById("Main"));

            var points = [];
            for (var i = 0; i < 10; i++) {
                points.push([Math.random() * 800 + 300, Math.random() * 500 + 100]);
            }

            var polyline = new PolylineShape({
                style: {
                    lineDash: [10, 10],
                    stroke: "rgba(220, 20, 60, 0.8)",
                    lineWidth: 10
                },
                shape: {
                    points: points,
                    smooth: 0.5
                }
            });

            zr.add(polyline);

            polyline.animate('style', true)
                .when(1000, {
                    lineDashOffset: 20
                })
                .start();

            var line = new LineShape({
                style: {
                    lineDash: [10, 10],
                    stroke: "rgba(10, 80, 60, 0.8)"
                },
                shape: {
                    x1: 100,
                    y1: 100,
                    x2: 500,
                    y2: 500
                }
            });
            zr.add(line);

            line.animate('style', true)
                .when(1000, {
                    lineDashOffset: -20
                })
                .start();

            var star = new StarShape({
                style: {
                    lineDash: [20, 10],
                    stroke: 'black',
                    fill: null
                },
                shape: {
                    n: 5,
                    r: 100,
                    cx: 300,
                    cy: 200
                }
            });
            zr.add(star);

            star.animate('style', true)
                .when(1000, {
                    lineDashOffset: 30
                })
                .start();

            var curve = new BezierCurve({
                style: {
                    lineDash: [5, 5],

                    lineDashOffset: 0
                },
                shape: {
                    x1: 100, y1: 100,
                    x2: 100, y2: 500,
                    x3: 500, y3: 100,
                    x4: 500, y4: 500
                }
            });

            zr.add(curve);

            curve.animate('style', true)
                .when(1000, {
                    lineDashOffset: -10
                })
                .start();

        }
    )
    </script>
</body>
</html>